<template>
	<view class="wrap">
		<!-- 搜索栏 -->
		<view class="search">
			<u-search v-model="keywords" @custom="search" @search="search" />
		</view>
		<!-- 竖向滚动栏 -->
		<scroll-view class="scroll-list" scroll-y="true">
			<!-- 消息组 -->
			<view class="uni-list">
				<!-- 通知 -->
				<view class="uni-list-cell" @click="navTo('/pages/sys/msg/list-item')">
					<view class="uni-media-list">
						<view class="home-icon icon-color03">
							<i class="iconfont icon-tongzhi1">
								<u-badge type="error" count="2" />
							</i>
						</view>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top">
								<span>通知公告</span>
								<span style="font-size: 26rpx;color: #999999;">12:35</span>
							</view>
							<view class="uni-media-list-text-bottom">
								<text><span>附近的教练:“你好，约吗？”</span></text>
							</view>
						</view>
					</view>
				</view>
				<!-- 申请 -->
				<view class="uni-list-cell" @click="navTo('/pages/sys/msg/examine-item')">
					<view class="uni-media-list">
						<view class="home-icon icon-color06">
							<i class="iconfont icon-msg-system"></i>
						</view>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top">
								<span>待办事项</span>
								<span style="font-size: 26rpx;color: #999999;">7月25日</span>
							</view>
							<view class="uni-media-list-text-bottom">
								<text><span>三上老师提交的“约课申请”待你同意</span></text>
							</view>
						</view>
					</view>
				</view>
				<!-- 朋友圈 -->
				<view class="uni-list-cell" @click="navTo('moment')">
					<view class="uni-media-list">
						<view class="home-icon icon-color02">
							<i class="iconfont icon-chart-pie">
								<u-badge type="error" :is-dot="true" />
							</i>
						</view>
						<view class="uni-media-list-body">
							<view class="uni-media-list-text-top">
								<span>朋友圈</span>
								<span style="font-size: 26rpx;color: #999999;"> </span>
							</view>
							<view class="uni-media-list-text-bottom">
								<text><span>桥本老师发布新的动态了，快来看看吧！</span></text>
							</view>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keywords: '',
			};
		},
		onLoad() {
			// 获取所有通知
			this.$u.api.message.getmessage()
				.then(res => {
					if (res.code === 200) {
						let readMsgList = res.data.filter(function(item) {
							return item.messageDetail.type === 0
						})
						let doMsgList = res.data.filter(function(item) {
							return item.messageDetail.type != 0
						})
						this.$u.vuex('readMsgList', readMsgList.reverse())
						this.$u.vuex('doMsgList', doMsgList.reverse())
					}
				});
		},
		methods: {
			navTo(url) {
				uni.navigateTo({
					url: url
				});
			},
			search(value) {
				this.$u.toast('搜索内容为：' + value)
			}

		}
	};
</script>

<style lang="scss">
	@import '../../../common/uni.css';

	page {
		background-color: #f5f5f5;
	}

	.wrap .search {
		background: #ffffff;
	}

	.uni-title {
		font-size: 30rpx;
		color: #333333;
		padding: 10px;
		background: #fff;
		border-top: 1px solid #ededed;
		margin-top: 20rpx;
	}

	.uni-media-list {
		padding: 15px 15px;
		position: relative;
	}

	.uni-media-list-body {
		height: 42px;
		padding-left: 30rpx;
	}

	.uni-media-list-text-top {
		height: 40rpx;
		overflow: hidden;
		width: 100%;
		line-height: 40rpx;
		font-size: 32rpx;
		display: flex;
		justify-content: space-between;
	}

	.uni-media-list-text-bottom {
		width: 100%;
		line-height: 24rpx;
		font-size: 26rpx;
		color: #666666;

		span {
			margin-right: 10rpx;
		}
	}
</style>
